import React from "react";
import { Card, Carousel } from "antd";
import RecommendItem from "./RecommendItem";
import styles from "../css/Recommend.module.css";

/**
 * 右侧的推荐组件
 */
function Recommend(props) {
  return (
    <Card title="推荐内容">
      {/* 上方轮播图 */}
      <div style={{ marginBottom: 20 }}>
        <Carousel autoplay>
          <div>
            <a
              style={{
                background:
                  "url(https://eventhubstrong.blob.core.chinacloudapi.cn/core/File/f2e72479-fae7-4f1b-8bc5-bc2bdea19168.jpg) center/cover no-repeat",
              }}
              className={styles.contentStyle}
              href="https://chinaevent.microsoft.com/events/details/a0d2ac89-b1e5-40e0-81ec-3c7c8df445d9"
              target="_blank"
              rel="noreferrer"
            ></a>
          </div>
          <div>
            <a
              style={{
                background:
                  "url(https://eventhubstorage.blob.core.chinacloudapi.cn/resources/Image/6a019988-d90c-48ff-b071-f4f2107e541b.png) center/cover no-repeat",
              }}
              className={styles.contentStyle}
              href="https://chinaevent.microsoft.com/Events/details/1b125915-cb8a-43c0-b2b4-100e7f24b01d"
              target="_blank"
              rel="noreferrer"
            ></a>
          </div>
          {/* <div>
            <a
              style={{
                background:
                  "url(https://image-static.segmentfault.com/583/489/583489293-62e22caab8392) center/cover no-repeat",
              }}
              className={styles.contentStyle}
              href="https://segmentfault.com/a/1190000042203704?utm_source=sf-homepage-headline"
              target="_blank"
              rel="noreferrer"
            ></a>
          </div> */}
          {/* <div>
            <a
              style={{
                background:
                  "url(https://image-static.segmentfault.com/422/352/422352298-6355600c6676b) center/cover no-repeat",
              }}
              className={styles.contentStyle}
              href="https://segmentfault.com/reco/1640000042672710?utm_source=sf-homepage-headline"
              target="_blank"
              rel="noreferrer"
            ></a>
          </div> */}
        </Carousel>
      </div>

      <RecommendItem
        recommendInfo={{
          num: 1,
          title: "利用思否猫素材实现一个丝滑的轮播图（html + css + js）",
          href: "https://segmentfault.com/a/1190000042661646",
        }}
      />
      <RecommendItem
        recommendInfo={{
          num: 2,
          title: "「🌟技术探索🌟」借助 CI / CD 实现前端应用的快速回滚",
          href: "https://segmentfault.com/a/1190000042531062",
        }}
      />
      <RecommendItem
        recommendInfo={{
          num: 3,
          title: "面试说：聊聊JavaScript中的数据类型",
          href: "https://segmentfault.com/a/1190000042539876",
        }}
      />
      <RecommendItem
        recommendInfo={{
          num: 4,
          title: "单标签实现复杂的棋盘布局",
          href: "https://segmentfault.com/a/1190000042513947",
        }}
      />
    </Card>
  );
}

export default Recommend;
